<script src="app/controllers/blogs/AddTopicBlogController.js"></script>

<!-- Add topics -->
<div id="hfr-addTopics" class="hfr-mw450 hfr-margin-auto" ng-controller="AddTopicBlogController">
	<form class="hfr-formAddNewSite" name="topicForm" ng-hide="processing">
		<h2 class="hfr-heading">Topics Suggestion</h2>
		<div class="form-group hfr-topics">
			<div class="input-group">
				<input type="text" class="form-control" id="hfr-categoriesSuggestions" placeholder="Enter Topics" list="listTopics" ng-model="topicId" ng-keypress="select_topic($event)">
				<span class="input-group-addon ti-folder"></span>
			</div>
			<div class="hfr-topicSelected">
				<span ng-repeat="selectTopic in selectTopics">{{selectTopic}} <span class="ti-close" ng-click="remove_topic(selectTopic)"></span></span>
			</div>
		</div>
		
		<datalist id="listTopics">
			<option ng-repeat="topic in topics" value="{{topic.id}}">{{topic.name}}</option>
		</datalist>
		<hr />
		<div class="row">
			<div class="col-md-7">
				<a href="#/add-new-site-wordpress" class="hfr-button-link">
					<span class="ti-angle-left"></span> Back
				</a>
			</div>
			<div class="col-md-5 content-right">
				<button type="button" class="hfr-button-cyan btn-block hfr-solid" ng-click="add_topic(topicForm)">Add Topic</button>
			</div>
		</div>
	</form>

	<hr />
	<div ng-show="processing" class="content-center">
		<img src="http://sierrafire.cr.usgs.gov/images/loading.gif" width="200" />
	</div>
	
	
</div>